<template>

  <div>

    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>



    <el-card class="box-card">


      <el-form :model="searchForm" label-width="70px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="客户名称">
              <el-input v-model="searchForm.customerName" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="状态" label-width="100px">
              <el-select v-model="searchForm.state" placeholder="请选择" clearable>
                <el-option label="未提交"   value="0"></el-option>
                <el-option label="已提交"   value="1"></el-option>
                <el-option label="已工艺"   value="2"></el-option>
                <el-option label="已报价"   value="3"></el-option>
                <el-option label="已转合同"   value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="searchList()">搜索</el-button>
            <el-button type="primary" @click="entryOrder">添加</el-button>
          </el-col>
        </el-row>
      </el-form>



      <el-table
        :data="ordersList"
        stripe
        style="width: 100%">
        <el-table-column
          prop="code"
          label="订单编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="customerName"
          label="客户"
          width="180">
        </el-table-column>
        <el-table-column

          label="税率(%)">
          <template slot-scope="scope">
            {{scope.row.taxRate*100}}
          </template>
        </el-table-column>
        <el-table-column
          prop="linkmanName"
          label="联系人">
        </el-table-column>
        <el-table-column
          prop="linkmanTel"
          label="联系电话">
        </el-table-column>
        <el-table-column

          label="创建时间">
          <template slot-scope="scope">
            {{scope.row.createDate|datefmt('YYYY/MM/DD')}}
          </template>
        </el-table-column>
        <el-table-column
          prop="updateDate"
          label="更新时间">
          <template slot-scope="scope">
            {{scope.row.updateDate|datefmt('YYYY/MM/DD')}}
          </template>
        </el-table-column>
        <el-table-column

          label="订单状态">
          <template slot-scope="scope">
          {{scope.row.state|stateFit}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-button type="primary" @click="detail(scope.row.id)">明细</el-button>
                <el-button type="primary" @click="del(scope.row.id)">删除</el-button>
                  <el-button type="primary" v-if="scope.row.state==0" @click="commitOrders1(scope.row.id)">提交</el-button>
                  <el-button type="primary" v-if="scope.row.state==1" @click="commitOrders2(scope.row.id)">转工艺</el-button>
                  <el-button type="primary" v-if="scope.row.state==2" @click="commitOrders3(scope.row.id)">转报价</el-button>
                  <el-button type="primary" v-if="scope.row.state==3" @click="commitOrders4(scope.row.id)">转合同</el-button>
                  <el-button type="primary" v-if="scope.row.state==2" @click="getBao(scope.row)">导出报价单</el-button>
                <el-button type="primary"  @click="jiLu(scope.row.id)">订单记录</el-button>

              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


      <el-dialog title="工艺员" :visible.sync="dialogFormVisible">
        <el-form :model="gyForm">
          <el-form-item label="选择工艺员" >
            <el-select v-model="gyForm.id" placeholder="请选择活动区域">
              <el-option
                v-for="item in gyForm"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="commitGy(gyForm.id)">确 定</el-button>
        </div>
      </el-dialog>


    </el-card>

  </div>

</template>

<script>
    export default {
        name: "OrderList",
      data(){
          return{
            searchForm:{},
            ordersList:[],
            page: {
              pagenum: 0,
              pagesize: 5
            },
            total:0,
            dialogFormVisible:false,
            gyForm:[],
            oid:null
          }

      },
      methods:{
          //转工艺选择工艺员
        commitGy:function(id){
          debugger;
          var tbId=JSON.parse(sessionStorage.getItem("user")).id;
          this.$http.post("orders/find2/"+this.oid+"/"+tbId+"/"+id).then((res)=>{
            debugger;
            this.$message(res.data.message);
          });
          window.location.reload();

        },
          //导出报价单
        getBao:function(row){
          debugger;
          location.href="http://localhost:8080/orders/getBao/"+row.id;
        },
          //订单记录
        jiLu:function(id){
          this.$router.push({ path: "/orderLog?id="+id });
        },
          del(id){
            this.$http.get("orders/del/"+id).then((res)=>{
              this.$message(res.data.message);
            });
            window.location.reload();
          },
        searchList(){
          debugger;
          this.$http.post("orders/list/"+this.page.pagenum+"/"+this.page.pagesize,this.searchForm).then((res)=>{
            this.ordersList=res.data.result.list;
            this.total=res.data.result.total;
          })

        },
        handleSizeChange(val) {
          this.page.pagesize=val;
          this.searchList();
        },
        handleCurrentChange(val) {
          this.page.pagenum=val;
          this.searchList();
        },
        entryOrder:function () {
          this.$router.push({ path: "/ordersAdd" });
        },

        detail:function (id) {
          this.$router.push({ path: "/ordersDetail?id="+id });
        },

        commitOrders1(id){
          var tbId=JSON.parse(sessionStorage.getItem("user")).id;
          this.$http.get("orders/find1/"+id+"/"+tbId).then((res)=>{
            this.$message(res.data.message);
          });
          window.location.reload();
        },
        commitOrders2(id){
          this.dialogFormVisible=true;
          this.$http.get("/userRole/getGy").then((res)=>{
            this.gyForm=res.data.result;
          });
          this.oid=id;


        },
        commitOrders3(id){
          var tbId=JSON.parse(sessionStorage.getItem("user")).id;
          this.$http.get("orders/find3/"+id+"/"+tbId).then((res)=>{
            this.$message(res.data.message);
          });
          window.location.reload();
        },
        commitOrders4(id){
          var tbId=JSON.parse(sessionStorage.getItem("user")).id;
          this.$http.get("orders/find4/"+id+"/"+tbId).then((res)=>{
            this.$message(res.data.message);
          });
          window.location.reload();
        }
      },
      filters:{
        stateFit(val){
          if (val==0){
            return "未提交";
          }
          if (val==1){
            return "已提交";
          }
          if (val==2){
            return "已工艺";
          }
          if (val==3){
            return "已报价";
          }
          if (val==4){
            return "已合同";
          }
          if (val==5){
            return "已开发票";
          }

        }

      },
      mounted() {
        this.searchList();
      }
    }
</script>

<style scoped>

</style>
